<template>
    <div class="user-box">
            <!-- header区域 -->
            <z-header>我的知心购</z-header>
            <!-- 页面核心区域 -->
            <section class="user-page">
                <!-- 用户信息 -->
                <div class="user-info">
                    <div class="info">
                        <img :src="$store.getters.getAvatarImage" />
                        <div>
                            <p>{{$store.state.userinfo.username}}</p>
                            <span class="name">用户名：{{$store.state.userinfo.username}}</span>
                            <span>{{$store.state.userinfo.phone}}</span>
                        </div>
                      <router-link to="/profile" class="account-management">
                            <i class="iconfont icon-shezhi"></i>账号管理
                      </router-link>
                    </div>
                </div>
                <!-- 订单 -->
                <div class="user-menu">
                    <div class="menu-item">
                        <i class="iconfont icon-daifukuan1"></i>
                        <span>待付款</span>
                    </div>
                    <div class="menu-item">
                        <i class="iconfont icon-daishouhuo1"></i>
                        <span>待收货</span>
                    </div>
                    <div class="menu-item">
                        <i class="iconfont icon-money"></i>
                        <span>已完成</span>
                    </div>
                    <div class="menu-item">
                        <i class="iconfont icon-icon1"></i>
                        <span>全部订单</span>
                    </div>
                </div>
                <!-- 为你推荐，关注等 -->
                <div>
                    <div class="user-fork">
                        <div class="fork-item">
                            <i>20</i>
                            <span>关注的商品</span>
                        </div>
                        <div class="fork-item">
                            <i>5</i>
                            <span>关注的店铺</span>
                        </div>
                        <div class="fork-item">
                            <i>10</i>
                            <span>我的足迹</span>
                        </div>
                    </div>
                    <recomm-box>为你推荐</recomm-box>
                </div>
            </section>

            <!-- tabbar区域 -->
            <tabBar :active="3"></tabBar>
    </div>     
</template>
<script>
import zHeader from '@/components/z-header.vue';
import tabBar from '@/components/tabBar.vue';
import recommBox from '@/components/recomm-box.vue';
export default {
    components:{
        zHeader,
        tabBar,
        recommBox
    }, 
}
</script>
<style lang="scss" scoped>
// 公共样式
@import '../../common/style/mixin';
// 单独样式
@import '../../css/user';
// 单独样式
@import '../../css/z-header';
</style>